{% extends "base.html" %}

{% block title %}购物车 - 农场{% endblock %}

{% block content %}
    <h1 class="text-3xl font-bold mb-6">我的购物车</h1>
    
    {% if not cart_items %}
        <div class="bg-white rounded-lg shadow-md p-8 text-center">
            <i class="fa fa-shopping-cart text-6xl text-gray-300 mb-4"></i>
            <h2 class="text-xl font-semibold mb-2">购物车是空的</h2>
            <p class="text-gray-600 mb-6">快去添加一些商品吧！</p>
            <a href="{{ url_for('index') }}" class="btn-primary">
                浏览商品
            </a>
        </div>
    {% else %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">小计</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for item in cart_items %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-10 w-10 flex-shrink-0">
                                        <img class="h-10 w-10 rounded-md object-cover" src="{{ item['image_url'] }}" alt="{{ item['name'] }}">
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">
                                            <a href="{{ url_for('product_detail', product_id=item['product_id']) }}">{{ item['name'] }}</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">¥{{ "%.2f"|format(item['price']) }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <form action="{{ url_for('update_cart', item_id=item['id']) }}" method="post" class="flex items-center">
                                    <input type="number" name="quantity" value="{{ item['quantity'] }}" min="1" class="w-16 border border-gray-300 rounded-md px-2 py-1 text-center">
                                    <button type="submit" class="ml-2 btn-secondary py-1 px-2 text-sm">
                                        更新
                                    </button>
                                </form>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">¥{{ "%.2f"|format(item['price'] * item['quantity']) }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="{{ url_for('remove_from_cart', item_id=item['id']) }}" class="text-red-600 hover:text-red-900">
                                    <i class="fa fa-trash"></i> 移除
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 订单摘要 -->
        <div class="mt-6 bg-white rounded-lg shadow-md p-6 max-w-md ml-auto">
            <h2 class="text-xl font-bold mb-4">订单摘要</h2>
            <div class="flex justify-between py-2 border-b border-gray-200">
                <span class="text-gray-600">商品总价</span>
                <span>¥{{ "%.2f"|format(total) }}</span>
            </div>
            <div class="flex justify-between py-2 border-b border-gray-200">
                <span class="text-gray-600">运费</span>
                <span>免费</span>
            </div>
            <div class="flex justify-between py-4 font-bold text-lg">
                <span>总计</span>
                <span class="text-red-600">¥{{ "%.2f"|format(total) }}</span>
            </div>
            <a href="{{ url_for('checkout') }}" class="btn-primary w-full text-center block">
                前往结账
            </a>
            <a href="{{ url_for('index') }}" class="btn-secondary w-full text-center block mt-3">
                继续购物
            </a>
        </div>
    {% endif %}
{% endblock %}
